页面样式更新！

这几天给Docusaurus的样式进行了一些装修!

首先是把主页的样式魔改了一下，因为Docusaurus默认会在主页上放一堆组件，所以修改的主要就是把原来的自定义组件去掉然后添加自己的样式。

 html, body, #__docusaurus, .main-wrapper {
  height: 100%;
  margin: 0;
}

:root {
  --navbar-height: 3.75rem; /* 假设顶栏高度为60px，根据实际情况调整 */
}

.navbar {
  height: var(--navbar-height);
  /* 其他导航栏样式 */
}

.heroBanner {
  height: calc(100vh - var(--navbar-height)); /* 减去顶栏的高度 */
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; /* 使内容在页面中居中 */
  background: url("/static/bg.svg") center/cover no-repeat;
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
    flex-direction: column; /* 在小屏幕上垂直排列内容 */
  }
}

.headerContent {
  display: flex;
  align-items: center;
  justify-content: center; /* 在大屏幕上居中对齐内容 */
  text-align: center; /* 确保文本居中对齐 */
}

.heroIcon {
  width: 130px; /* 增大图标尺寸 */
  height: 130px; /* 增大图标尺寸 */
  border-radius: 50%;
  margin-right: 40px; /* 根据需要调整间距 */
  margin-bottom: 18px;
}

@media screen and (max-width: 996px) {
  .headerContent {
    flex-direction: column; /* 在小屏幕上垂直排列内容 */
  }

  .heroIcon {
    margin-right: 0; /* 在小屏幕上移除右边距 */
    margin-bottom: 20px; /* 在小屏幕上增加下边距 */
  }
}

/* 新增样式，确保图标和文本垂直居中对齐 */
.headerContent > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

还有一些样式需要在custom.css中手动添加：

.heroTitle {
  line-height: 1.25 !important;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem !important;
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-stops)
  ) !important;
  --tw-gradient-from: #5d67e8 !important;
  --tw-gradient-to: rgb(93 103 232 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  --tw-gradient-to: #ef4444 !important;
  text-align: left !important;
  font-size: 3rem !important;
}

.heroSubTitle {
  color: var(--gray-text-color);
}

然后是修改顶栏实现按钮在鼠标移动到上方时展示强调动画：

/* 直接复制修改对应模块的styles.module.css即可 */
.toggleButton {
  border-radius: 12px;
  transition: box-shadow 0.5s ease; /* 添加平滑过渡效果 */
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.toggleButton:hover {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  background-color: #2190af05;
}

这样这一次更新就基本结束了！

话说好像最近Maimai要更新了噢...